<template>
    <div class="set-integrator-modal-wrapper">
        <el-dialog :model-value="props.value" :title="dialog.title" :width="dialog.width" destroy-on-close>
            <el-form ref="ruleFormRef" :model="formData" :rules="ruleForm" label-width="60px">
                <el-form-item label="集成者" prop="integratorName">
                    <el-input v-model="formData.integratorName" placeholder="请输入集成者名称"></el-input>
                </el-form-item>
                <el-form-item label="标识符" prop="integratorNo">
                    <el-input
                        v-model="formData.integratorNo"
                        placeholder="请输入标识符"
                        :disabled="row ? true : false"
                    ></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="props.close">取消</el-button>
                    <el-button type="primary" @click="submitForm" :loading="loading">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus';
import { messageIntegrationService } from '@great/services';
import { reactive, ref } from 'vue';
import type { PopupBoxProps } from '@great/utils';
import { useRequest } from 'vue-request';

interface IProps extends PopupBoxProps {
    row?: Record<string, any>;
    callBack?: () => Promise<void>;
}
const props = defineProps<IProps>();

interface Dialog {
    title: string;
    width: number;
    detail?: Record<string, any>;
}
const dialog = reactive<Dialog>({
    title: '维护集成者',
    width: 600,
    detail: undefined
});

const formData = reactive<any>({
    integratorName: '',
    integratorNo: ''
});
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<FormRules<any>>({
    integratorName: [{ required: true, message: '请输入集成者名称', trigger: ['change', 'blur'] }],
    integratorNo: [{ required: true, message: '请输入标识符', trigger: ['change', 'blur'] }]
});

const buildForm = () => {
    let tergetData = JSON.parse(JSON.stringify(formData));
    return tergetData;
};
// 提交接口请求
const { run, loading } = useRequest(
    () => {
        return messageIntegrationService[props.row ? 'editIntegrator' : 'createIntegrator'](buildForm());
    },
    {
        manual: true,
        onSuccess(res) {
            ElNotification({
                title: '设置成功！',
                type: 'success'
            });
            closeDialog();
        }
    }
);

// 表单提交
const submitForm = () => {
    ruleFormRef.value?.validate(valid => {
        valid && run();
    });
};
//关闭弹框
const closeDialog = () => {
    props.close();
    props.callBack?.();
};

// 打开弹框
const openDialog = () => {
    if (props.row) {
        dialog.detail = JSON.parse(JSON.stringify(props.row));
        formData.id = props.row?.id;
        Object.keys(formData).forEach(key => {
            formData[key] = props.row?.[key];
        });
    } else {
        delete formData.id;
    }
};

const init = () => {
    openDialog();
};
init();
</script>
<style scoped lang="scss">
.set-integrator-modal-wrapper {
}
</style>
